<template>
  <div>
    <el-table
      ref="tableRef"
      v-loading="isLoading"
      :data="dataArray"
      row-key="id"
      height="512"
      @selection-change="handleSelectionChange"
      @row-dblclick="handleRowDblclick"
    >
      <!-- 多选框 -->
      <el-table-column
        reserve-selection
        type="selection"
        align="center"
        width="64"
      >
      </el-table-column>
      <!-- 序号 -->
      <el-table-column
        type="index"
        align="center"
        label="序号"
        width="64"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="name"
        label="角色名"
        sortable
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="code"
        label="代码"
        sortable
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="remark"
        label="备注"
        sortable
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="company"
        label="所属公司"
        sortable
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="organization"
        label="所属机构"
        sortable
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="status"
        label="状态"
        sortable
      >
        <template
          slot-scope="scope"
        >
          <el-tag
            :type="['danger', 'success', 'warning', 'success'][scope.row.status]"
          >
            {{ ['停用', '启用', '未知', '启用'][scope.row.status] }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        width="350"
      >
        <template
          slot-scope="scope"
        >
          <el-button
            type="primary"
            size="small"
            @click="handleCopy(scope.row.id)"
          >
            复 制
          </el-button>
          <el-button
            size="small"
            @click="handleEdit(scope.row.id)"
          >
            编 辑
          </el-button>
          <el-button
            type="danger"
            size="small"
            @click="handleDelete(scope.row)"
          >
            删 除
          </el-button>
          <el-button
            type="warning"
            size="small"
            @click="handleShowRights(scope.row.id)"
          >
            查看权限
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :current-page="pagination.number"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      :page-size="pagination.size"
      :total="pagination.total"
      @size-change="handlePageSizeChange"
      @current-change="handlePageNumChange"
    >
    </el-pagination>
  </div>
</template>

<script>
/**
 * @typedef {{
 *   'code': String,
 *   'company': String,
 *   'id': String,
 *   'name': String,
 *   'organization': String,
 *   'status': 0 | 1,
 * }} Data
 * @typedef {{
 *   'id': String,
 * }} Row 表格一行的数据
 */
/**
 * # 角色数据表格
 * 用于展示角色数据
 *
 * 展示的数据项有`角色名`、`编号`、`备注`、`所属公司`、`所属机构`和`状态`
 *
 * 存在隐含的`id`属性用于数据操作，不显示
 *
 * 可以对每一行的数据进行`复制`、`编辑`、`删除`和`查看权限`操作
 */
export default {
  'name': 'RoleDataTable',
  'props': {
    /**
     * `角色数据表格`的用户数据
     * @type {Data[]}
     */
    'dataArray': {
      'default' () {
        return []
      },
      'type': Array,
    },
    /**
     * 设置`角色数据表格`是否为加载状态
     */
    'isLoading': {
      'default': false,
      'type': Boolean,
    },
    /**
     * 设置`角色数据表格`的分页信息
     *
     * 包括`页码`、`页面容量`和`数据总量`
     * @type {{
     *   'number': Number,
     *   'size': Number,
     *   'total': Number,
     * }}
     */
    'pagination': {
      'default' () {
        return {
          'number': 1,
          'size': 10,
          'total': 0,
        }
      },
      'type': Object,
    },
  },

  'methods': {
    /**
     * 取消被勾选的列的勾选状态
     * @param {Row} row 被勾选的列
     */
    'cancelRowSelection' (row) {
      this.$nextTick(() => {
        this.$refs.tableRef.toggleRowSelection(row, false)
      })
    },
    /**
     * 取消所有被勾选的列的勾选状态
     */
    'clearSelection' () {
      this.$nextTick(() => {
        this.$refs.tableRef.clearSelection()
      })
    },
    /**
     * 处理`复制`按钮的点击事件
     * @param {String} id 当前`角色数据表格`行的用户`id`
     */
    'handleCopy' (id) {
      this.$emit('copy', id)
    },
    /**
     * 处理`删除`按钮的点击事件
     * @param {Row} row 当前`角色数据表格`行对象
     */
    'handleDelete' (row) {
      this.$emit('delete', row)
    },
    /**
     * 处理`编辑`按钮的点击事件
     * @param {String} id 当前`角色数据表格`行的用户`id`
     */
    'handleEdit' (id) {
      this.$emit('edit', id)
    },
    /**
     * 处理`角色数据表格`的表格的当前页码修改事件
     * @param {Number} pageNum 页码
     */
    'handlePageNumChange' (pageNum) {
      this.$emit('current-change', pageNum)
    },
    /**
     * 处理`角色数据表格`的表格的页面容量修改事件
     * @param {Number} pageSize 页面容量
     */
    'handlePageSizeChange' (pageSize) {
      this.$emit('size-change', pageSize)
    },
    /**
     * 处理`角色数据表格`的表格行的双击事件
     * @param {Row} row 当前`角色数据表格`行对象
     */
    'handleRowDblclick' (row) {
      this.$emit('edit', row.id)
    },
    /**
     * 处理`角色数据表格`的表格行勾选事件
     * @param {Row[]} selectedRowArray 被勾选的`角色分配器`的表格行
     */
    'handleSelectionChange' (selectedRowArray) {
      this.$emit('selection-change', selectedRowArray)
    },
    /**
     * 处理`查看权限`按钮的点击事件
     * @param {String} id 角色的`id`属性
     */
    'handleShowRights' (id) {
      this.$emit('rights-show', id)
    },
  },
}
</script>

<style scoped lang="scss">

</style>
